<template>
<div>
    <!-- 头部组件 -->
    <van-nav-bar
      :title="isLogin?'登录':'注册'"
      left-text="返回"
      left-arrow
      @click-left="router.replace('/home')"
    />
  <div class="container">
      <!-- 头像 -->
      <div class="user_img">
          <img src="https://w.wallhaven.cc/full/p9/wallhaven-p98xkp.jpg" />
      </div>
        
    <!-- 表单数据 -->
      <van-form @submit="onSubmit" validate-trigger="onSubmit">
        <van-cell-group inset>
          <!-- 注册和登录通用的账号和密码 -->
          <van-field
            v-model="formInfo.name"
            name="name"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="formInfo.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
            <!-- 仅注册用 要使用v-if 不能使用v-show 要销毁不能是隐藏-->
          <van-field
            v-if="!isLogin"
            v-model="formInfo.avatar"
            type="url"
            name="avatar"
            label="头像"
            placeholder="图片地址"
            disabled
            :rules="[
              { required: true, message: '请填写图片地址' },
            ]"
          />
          <van-field v-if="!isLogin"  name="sex" label="性别">
            <template #input>
              <van-radio-group v-model="formInfo.sex" direction="horizontal">
                <van-radio name="1">男</van-radio>
                <van-radio name="0">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-if="!isLogin"
            v-model="formInfo.sign"
            type="text"
            name="sign"
            label="签名"
            placeholder="个性签名"
            :rules="[{ required: true, message: '请填写个性签名' }]"
          />
          <van-field
            v-if="!isLogin" 
            v-model="formInfo.secretAnswer"
            type="text"
            name="secret_answer"
            label="密保"
            placeholder="验证密保"
            :rules="[{ required: true, message: '请填写密保' }]"
          />
        </van-cell-group>

        <div style="margin: 16px;">
          <van-button round block :type="isLogin?'success':'primary'" native-type="submit">
            {{ isLogin?'登录':'注册' }}
          </van-button>
        </div>
        <div style="margin: 16px;">
          <van-button @click="isLogin=!isLogin" round block :type="isLogin?'primary':'default'">
            {{ isLogin?'注册':'返回登录' }}
          </van-button>
        </div>
      </van-form>
  </div>
</div>
</template>

<script setup>
import { reactive, ref } from "vue"
import {useRouter} from 'vue-router'
import { showNotify } from 'vant';
import useUserInfo from '@/stores/useUserInfo'
import {register} from '@/api/user'
// 引入购物车仓库
import useCartInfo from "@/stores/useCartInfo";

let store = useCartInfo();

// 表单数据
let formInfo=reactive({
  name:'',
  password:'',
  avatar:'https://w.wallhaven.cc/full/p9/wallhaven-p98xkp.jpg',
  sex:'1',
  sign:'',
  secretAnswer:''
})

// 判断登录或者注册的标识符
let isLogin=ref(true);

// 获取路由器实例
let router=useRouter()
// 从仓库解构出方法
let {userlogin}=useUserInfo()

let onSubmit=async (values)=>{
    // 登录的逻辑
    // 仓库的action帮 登录成功存token到cookie里 存储个人信息到仓库里
    if(isLogin.value){
      await userlogin(values);
      store.getCartList();
      // 跳转到home页面
      router.replace('/home');
    }else{
      // 注册的逻辑
      await register(values);
      showNotify({
        type:'success',
        message:'注册成功',
        onClose:()=>{
          isLogin.value=true;
          formInfo.password='';
        },
        duration:1000
      })
    }  
}

</script>


<style lang="less" scoped>
.container {
    margin-top: 40px;

    .user_img {
        height: 100px;
        padding-top: 58px;
        margin-bottom: 28px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 88px;
            height: 88px;
            border-radius: 50%;
            object-fit: cover;
        }
    }
}
</style>



